<style lang="scss">
  .page-main-body {
    margin-top: 15px;
    text-align: left;
  }

  .header {
    background: #fff;
    border-bottom: 1px solid #ccc;
    .el-menu--horizontal {
      border-bottom: 0;
      padding:0;
    }
  }
</style>
<template>
  <div>
    <div class="header">
      <el-menu :default-active="currentPath" class="container" :router="true" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/nlp">语义分析</el-menu-item>
        <el-menu-item index="/kg">图谱展示</el-menu-item>
      </el-menu>
    </div>

    <router-view class="page-main-body"/>

  </div>
</template>

<script>
  import utils from '@/utils/utils';

  export default {
    data: () => ({
      transitionName: 'slide-left',
      toRoute: {},
      loading: true
    }),
    computed: {
      currentPath() {
        return this.$route.fullPath;
      }
    },

    beforeRouteEnter(to, form, next) {
      next(vm => {
        vm.toRoute = to;
      });
    },
    beforeRouteUpdate(to, from, next) {
      utils.removeClass(
        document.getElementsByTagName('body')[0],
        'overflow-hidden'
      );
      this.toRoute = to;
      next();
    },

    methods: {
      handleSelect(v) {
        console.log(v);
      }
    }
  };
</script>
